<template>
    <div class="basic-menu">
        <a-menu
                mode="inline"
                theme="dark"
                @click="menuClick"
                :forceSubMenuRender="true"
                @select="selectRouter"
                :selectedKeys="selectedKeys"
                :open-keys.sync="openKeys"
                :inline-collapsed="collapsed">
            <template v-for="item in menuList">
                <a-menu-item v-if="!item.childrenList || item.childrenList.length === 0" :key="item.resourceUrl" :collapsed="collapsed">
                    <i v-show="item.resourceIcon" :class="['menuIcon',item.resourceIcon]"></i>
                    <span style="margin-left: 3px;" :class="{'vis-menu-title' :collapsed}">{{ item.resourceName }}</span>
                </a-menu-item>
                <sub-menu v-else :key="item.resourceUrl" :menu-info="item" :collapsed="collapsed" />
            </template>
        </a-menu>
    </div>
</template>

<script>
    import {Menu} from 'ant-design-vue';

    const SubMenu = {
        template: `
            <a-sub-menu :key="menuInfo.resourceUrl" v-bind="$props" v-on="$listeners">
                <span slot="title">
                    <i v-show="menuInfo.resourceIcon" :class="['menuIcon',menuInfo.resourceIcon]"></i>
                    <span :class="{'vis-menu-title':collapsed}">{{ menuInfo.resourceName }}</span>
                </span>
                <template v-for="item in menuInfo.childrenList">
                    <a-menu-item v-if="!item.childrenList || item.childrenList.length === 0" :key="item.resourceUrl">
                        <i v-show="item.resourceIcon" :class="['menuIcon',item.resourceIcon]"></i>
                        <span :class="{'vis-menu-title':collapsed}">{{ item.resourceName }}</span>
                    </a-menu-item>
                    <sub-menu v-else :key="item.resourceUrl" :menu-info="item"/>
                </template>
            </a-sub-menu>
        `,
        name: 'SubMenu',
        // must add isSubMenu: true
        isSubMenu: true,
        props: {
            ...Menu.SubMenu.props,
            // Cannot overlap with properties within Menu.SubMenu.props
            menuInfo: {
                type: Object,
                default: () => ({}),
            },
            collapsed: {
                type: Boolean,
                default: false,
            }
        },
    };
    export default {
        props: {
            collapsed: {
                type: Boolean,
                default: false
            }
        },
        components: {
            'sub-menu': SubMenu,
        },
        data() {
            return {
                selectedKeys: [],
                openKeys: [],
                menuList: [],
            };
        },
        watch: {
            $route () {
                this.defRouterActive();
            }
        },
        mounted() {
            this.getMenuList();
        },
        methods: {
            menuClick({key}) {
                this.$router.push({path: key});
            },
            defRouterActive () {
                this.openKeys = this.$route.meta.menuOpen ? [this.$route.meta.menuOpen] : [];
                this.selectedKeys = this.$route.meta.menuSel ? [this.$route.meta.menuSel] : [];
            },
            selectRouter ({selectedKeys }) {
                this.selectedKeys = selectedKeys;
            },
            getMenuList() {
                this.defRouterActive();
                this.menuList = this.$store.state.context.authorization.permissionMenuListVOList || [];
            }
        }
    };
</script>

<style scoped lang="scss">
    .basic-menu {
        height: calc(100% - 64px);
        overflow-y: scroll;
        /deep/ .menuIcon{
            display: inline-block;
            width: 20px;
            height: 20px;
        }
        /deep/.vis-menu-title{
            display: none;
        }
        &::-webkit-scrollbar {
            /*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
            width: 1px;
            height: 1px;
        }

        &::-webkit-scrollbar-button {
            /*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
            /*background:#74D334;*/
            display: none;
        }

        &::-webkit-scrollbar-track {
            /*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
            /*background:#FF66D5;*/
            display: none;
        }

        &::-webkit-scrollbar-track-piece {
            /*内层轨道，滚动条中间部分（位置4）*/
            /*background:#FF66D5;*/
        }

        &::-webkit-scrollbar-thumb {
            /*滚动条里面可以拖动的那部分（位置5）*/
            /*background:#FFA711;*/
            border-radius: 4px;
        }

        &::-webkit-scrollbar-corner {
            /*边角（位置6）*/
            /*background:#82AFFF;*/
        }

        &::-webkit-scrollbar-resizer {
            /*定义右下角拖动块的样式（位置7）*/
            /*background:#FF0BEE;*/
        }

        & {
            scrollbar-arrow-color: #535353; /**/
            /*三角箭头的颜色*/
            scrollbar-face-color: #333; /**/
            /*立体滚动条的颜色*/
            scrollbar-3dlight-color: #666; /**/
            /*立体滚动条亮边的颜色*/
            scrollbar-highlight-color: #666; /**/
            /*滚动条空白部分的颜色*/
            scrollbar-shadow-color: #999; /**/
            /*立体滚动条阴影的颜色*/
            scrollbar-darkshadow-color: #666; /**/
            /*立体滚动条强阴影的颜色*/
            scrollbar-track-color: #666; /**/
            /*立体滚动条背景颜色*/
            scrollbar-base-color: #f8f8f8; /**/
            /*滚动条的基本颜色*/
        }
    }
</style>
